<template>
    <div>
        <div>
            姓名：<input type="text" v-model="name"/>
            住址：<input type="text" v-model="address"/>
            <div>
                近十四天是否到访过武汉：
                <label v-for="(i,index) in radio" :key="index">
                    <input type="radio" v-model="radioYes" :value="i.value"/>
                </label>
            </div>

            <button @click="submit">提交</button>
        </div>
        <Son @changeIsShow="changeIsShow" v-show="isShow">
            
            <template v-slot:title="{title,subTitle}">
                <h3>{{title}}：{{subTitle}}</h3>
            </template>

            <template v-slot:ctx>
                <div v-if="name!==''&&address!==''&&radioYes==='是'">近期是否到访过武汉<input type="text"/></div>
                <div v-else>{{msg}}</div>  
            </template>
        </Son>
    </div>
</template>
<script>
import Son from './son.vue'
export default {
    data(){
        return { 
       
        msg:'',
        name:'',
        address:'',
        isShow:false,
        radioYes:'是',
        radio:[
            {
                value:'是'
            },
            {
                value:'否'
            }
        ],

        }

    },
    components:{
        Son
    },
    methods:{
        changeIsShow(){
            this.isShow = false
        },
        submit(){
            const {name,address} = this
            if(name=== ''){
                    this.msg = '姓名不能为空'
                    this.isShow = true
                    return
            }
            if(address=== ''){
                    this.msg = '地址不能为空'
                    this.isShow = true
                    return
            }
            if(this.radioYes === "是"){
                 this.isShow = true
                 return
            }
        }
    }

}
</script>